<template>
  <div>
    <div class="change-channel">
      <div class="header">
        <img src="~@/assets/imgs/order/order_channel.png" alt="">
        <div>
          <div>You receiving account is abnormal please</div>
          <div>carefully check and fill in again!</div>
        </div>
      </div>

      <div class="channel form">
<!--        <p class="border-icon" />-->

        <div class="form-group">
          <label>Withdrawal Channel</label>
          <!--取款银行-->
          <input v-model="form.withdrawChannelName" @click="showChooseBank" type="text" :placeholder="$t('plsChoose')"
                 readonly class="input-select val" />
        </div>
        <div class="form-group" v-if="form.withdrawChannel!=9&&form.withdrawChannel!=1">
          <label>Withdrawal Account</label>
          <!--取款银行-->
          <input v-model="form.withdrawAccount" type="text" :placeholder="$t('plsChoose')" class="val" />
        </div>
      </div>

      <div class="btn-box">
        <button class="btn-ui" @click="changeChannel">Submit Application</button>
      </div>
    </div>

    <!--取款银行选择框-->
    <popup v-model="isVisibleBankPicker" position="bottom">
      <picker show-toolbar :title="$t('bank')" :columns="payChannelList" value-key="channelName"
              @cancel="isVisibleBankPicker = false" @confirm="chooseBank"/>
    </popup>
  </div>
</template>

<script>
import {validateMobile } from '@/libs/validate';
import { Popup, Picker, DatetimePicker, RadioGroup, Radio } from 'vant';
export default{
    components:{
        Popup,
        Picker,
    },
    props:{
        orderInfo:{
            default:()=>{}
        }

    },
    data(){
        return {
            payChannelList:[],
            isVisibleBankPicker:false,
            form:{
                withdrawChannelName:null,
                withdrawChannel:null,
                withdrawAccount:null,
            },
        }
    },
    methods:{
        chooseBank(val){
            this.form.withdrawChannel = val.channelCode;
            this.form.withdrawChannelName = val.channelName;
            this.form.withdrawAccount = null
            this.isVisibleBankPicker = false
        },
        showChooseBank(){
            this.isVisibleBankPicker = true
        },
        queryPayChannel(){

            this.$api.queryPayChannel().then(res=>{
                let {status,error,data} = res;
                if(status==1&&error=='00000000'&&data){
                    this.payChannelList = res.data.payChannelList;
                    this.payChannelList.forEach(item=>{
                      if(item.channelName == this.form.withdrawChannelName){
                        this.form.withdrawChannel = item.channelCode
                      }
                    })
                };
            })
        },
        changeChannel(){
            if(this.form.withdrawChannel!=9&&this.form.withdrawChannel!=1){
                if (!validateMobile(this.form.withdrawAccount)) {
                    this.$toast(this.$tc('plsInputRightMobile'));
                    return
                }
            };
            if(this.orderInfo.withdrawChannelName == this.form.withdrawChannelName&&this.form.withdrawAccount == this.orderInfo.withdrawAccount){
              this.$toast('Collection account number and collection method cannot be the same');
              return
            };
            let params = {
                ...this.form,
                orderNo:this.orderInfo.orderNo,
                oldWithdrawAccount:this.orderInfo.withdrawAccount,
                withdrawSystemChange:this.orderInfo.withdrawSystemChange
            }
            this.$api.updateLoanAccount(params).then(res=>{
                let {status,error,data} = res;
                if(status==1&&error=='00000000'){
                    this.$emit('changeSuccess')
                };
            })
        },
    },
    created(){
        this.queryPayChannel()
    },
  mounted() {
    this.form.withdrawChannelName = this.orderInfo.withdrawChannelName;
    this.form.withdrawAccount = this.orderInfo.withdrawAccount;
  }
}
</script>
<style lang="scss" scoped>
@import '../../../form.scss';
.change-channel {
  min-height: calc(100vh - 120px);
  box-sizing: border-box;
  .header {
    text-align: center;
    padding: 50px 0 80px;
    background: white;
    margin: 20px 24px 0;
    border-radius: 16px;
    img {
      width: 240px;
      height: 240px;
      margin-bottom: 20px;
    }
    div {
      color: #EC5958;
      font-size: 32px;
      font-weight: bold;
      line-height: 38px;
    }
  }

  .channel {
    // position: relative;
    // background: #FFFFFF;
    // margin-top: 90px;
    // border-radius: 16px;
    margin-top: 58px;
  }
  .btn-box {
    margin-top: 80px;
    position: relative;
    background-color: transparent;
    box-shadow: none;
    .btn-ui {
      width: 100%;
    }
  }
}
</style>
